<template>
    <div class="article-list">
        <!-- 下拉刷新 -->
      <van-pull-refresh v-model="iserFreshLoading" 
       :success-text="refreshSuccessText"
       :success-duration="1500"
      @refresh="onRefresh"
      >
       
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
           error-text="加载失败，请点击重新加载哦~"
          @load="onLoad"
        >
     
         <!-- 文章列表项 -->
          <atricle-item
           v-for=" (article,index) in list" 
          :key="index"
          :article="article"
          />
   
     </van-list>
</van-pull-refresh>

    </div>
</template>

<script>

import { getArticles } from '@/api/article'
import AtricleItem from '@/components/article-item'

   export default {
      name: 'ArticleList',
      components: {
         AtricleItem
      },
      props: {
         channel: {
            type:Object,
            required: true
         }
      },
      data() {
         return {
            // 存储列表数据的数组
            list: [],
            //控制加载中loading 状态
            loading: false,
            //控制数据加载结束的状态
            finished: false,
            //请求获取下一页数据的时间戳
            timestamp:null,
            // 控制列表加载失败的提示状态
            error:false,
            // 控制下拉刷新的loading
            iserFreshLoading:false,
            // 下拉刷新传成功提示文本
            refreshSuccessText: '恭喜你刷新成功~'
         }
      },
      methods:{
         /*
         // 初始化或滚动到底部的时候会触发调用onLoad时间
             onLoad() {
          // 1.请求获取数据
            setTimeout(() => {
             // 2.把请求结果数据放到list数组中
            for (let i = 0; i < 10; i++) {
               this.list.push(this.list.length + 1)
            }

            // 3.本次数据加载结束之后要把加载状态设置为结束
            // loading 关闭以后才能触发下一次的加载更多
            this.loading = false;

            // 4.判读是否数据全部加载完成
            if (this.list.length >= 40) {
             // 如果没有数据了,把finished 设置为true,之后不再触发加载更多
              this.finished = true;
            }
          }, 1000);
        },
         */
         // 初始化或滚动到底部的时候会触发调用onLoad时间
       async  onLoad() {
             try {
                // 1.请求获取数据
                 const { data  } = await getArticles({
                     channel_id: this.channel.id ,// 频道ID
                     // 请求第一页数据：当前最新时间戳
                     // 用于请求之后数据的时间搓会在当前请求结果中返回给你
                     timestamp: this.timestamp || Date.now()  // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
                 })
                  // 模拟随机失败的效果
                  //  if(Math.random() > 0.5) {
                  //    JSON.parse('sadfvgdf')
                  //  }
             
                  // console.log(data);
                   // 2.把请求结果数据放到list数组中
                  const { results }  = data.data
                  
                   // 数组的展开操作符，它会把元素一个一个的拿出来
                   // 不要用等于直接赋值,而是每次加载往数组里面追加内容
                   this.list.push(...results)
                  
             
                // 3.本次数据加载结束之后要把加载状态设置为结束
                  this.loading = false
                // 4.判读是否数据全部加载完成
                    if(results.length) {
                     // 更新获取下一页数据的时间戳
                       this.timestamp = data.data.pre_timestamp
                    } else {
                     // 没有数据了，将finished 设置为 true 不再load加载跟多
                     this.finished = true
                    }
              } catch (err) {
                 //  展示错误提示状态
                 this.error = true
                 // 请求失败了.loading 也需要关闭
                 this.loading = false
              }

          },
         //当下拉刷新的时候会触发调用该函数
        async  onRefresh() {
          try {
               //1.请求获取数据
                const { data  } = await getArticles({
                     channel_id: this.channel.id ,
                     timestamp:  Date.now() // 下拉刷新请求最新的数据
                  })

              // 2.将数据追加到列表的顶部
               const { results } = data.data
               this.list.unshift(...results)

                // 3.关闭下拉刷新的loading 状态
               this.iserFreshLoading = false
                
               //更新下拉刷新成功提示的文本
               this.refreshSuccessText = `刷新成功,为您更新了${results.length}条文章哦~~`
                
             }  catch (err) {
               this.refreshSuccessText = '很遗憾,您刷新失败了'
               this.iserFreshLoading = false
             }
             
          }
     },
    
   }
   

</script>

<style lang="less" scoped>
     .article-list {
           height: 79vh;
           overflow-y: auto;
      }





</style>